import React, { useState } from 'react';
import { Button, KeyboardAvoidingView, Platform, StyleSheet, View } from 'react-native';
import { TextInput } from 'react-native-gesture-handler';
import { validateIntervalInput } from '../utils/validateInput';

export const HomeScreen = () => {
  const [isBlockBtn, setIsBLockBtn] = useState<boolean>(false)

  const [workoutInterval, setWorkoutInterval] = useState<string>('1:00')
  const [restInterval, setRestInterval] = useState<string>('00:30')
  const [sets, setSets] = useState<string>('5')

  const inputHandler = (name: string, data: string) => {
    if (name === 'workoutInterval') {
      setWorkoutInterval(data)
      setIsBLockBtn(!validateIntervalInput(workoutInterval))
      console.log(isBlockBtn, 'eee')
    }
    if (name === 'restInterval') {
      setRestInterval(data)
      setIsBLockBtn(!validateIntervalInput(restInterval))
    } 
    if (name === 'sets') {
      setSets(data)
    }

  }

  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    >

      <View style={styles.inputHolder}>
        <TextInput
          style={styles.input}
          placeholder="Workout Interval"
          onChangeText={(interval) => inputHandler('workoutInterval', interval)}
          value={workoutInterval}
        />
        <TextInput
          style={styles.input}
          placeholder="Rest Interval"
          onChangeText={interval => inputHandler('restInterval', interval)}
          value={restInterval}
        />
        <TextInput
          style={styles.input}
          placeholder="Sets"
          onChangeText={value => inputHandler('sets', value)}
          value={sets}
        />
      </View>

      <Button
        title='Start'
        disabled={isBlockBtn}
      />
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    minHeight: 200,
    flexDirection: 'column',
    // backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'space-around',
  },

  inputHolder: {
    // flex: 1,
    height: '50%',
    flexDirection: 'column',
    // backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'space-between',
  },

  input: {
    borderWidth: 1,
    borderRadius: 6,
    textAlign: 'center'
    // margin: '10px'
  },

  button: {
    borderRadius: 10,
    height: '20px',
    width: '300px'
  },
});
